<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background-color: #000;
        font-weight: 500;
        height: 100vh;
    }
    .keyboard{
        display: flex;
        padding-top: 200px;
        flex-direction: column;
        align-items: center;
    }
    .row{
        display: flex;
        /* 去掉li前面的点 */
        list-style: none;
    }
    li{
        height: 3em;
        width: 3em;
        color: rgba(0, 0, 0, 0.6);
        border-radius: 0.4em;
        /* 字间距 */
        letter-spacing: 1px;
        margin: 0.4em;
        text-align: center;
        line-height: 3em;
        font-size: 1em;
    }
    #tab{
        width: 5em;
    }
    #caps{
        width: 6em;
    }
    #left-shift,
    #right-shift
    {
        width: 8em;
    }
    #enter{
        width: 6em;
    }
    #back{
        width: 5em;
    }
    .pinky{
        background-color: crimson;
        border: 2px solid crimson;
    }
    .ring{
        background-color: coral;
        border: 2px solid coral;
    }
    .middle{
        background-color: darkorange;
        border: 2px solid darkorange;
    }
    .pointer1st{
        background-color: gold;
        border: 2px solid gold;
    }
    .pointer2nd{
        background-color: khaki;
        border: 2px solid khaki;
    }
    .hit{
        animation: hit 0.3s both;
    }
    @keyframes hit {
        0%{
            transform: scale(1.2);
        }
        100%{
            transform: scale(1);
        }
    }
    .pinky.selected{
        color: crimson;
    }
    .ring.selected{
        color: coral;
    }
    .middle.selected{
        color: darkorange;
    }
    .pointer1st.selected{
        color: gold;
    }
    .pointer2nd.selected{
        color: khaki;
    }
   
    .selected{
        background-color: transparent;
        animation: vibrate 0.3s linear infinite both;
    }
    @keyframes vibrate {
        0%{
            transform: translate(0);
        }
        20%{
            transform: translate(-2px,2px);
        }
        40%{
            transform: translate(-2px,-2px);
        }
        60%{
            transform: translate(2px,2px);
        }
        80%{
            transform: translate(2px,-2px);
        }
        100%{
            transform: translate(0);
        }
    }
</style>
<body>
    <!-- 首先我们先把键盘上的字母先抄下来 -->
    <div class="keyboard">
        <!-- 一共三行 -->
        <div class="row row-0">
            <li class="pinky" id="esc">~</li>
            <li class="pinky" id="1">1</li>
            <li class="ring" id="2">2</li>
            <li class="middle" id="3">3</li>
            <li class="pointer1st" id="4">4</li>
            <li class="pointer2nd" id="5">5</li>
            <li class="pointer2nd" id="6">6</li>
            <li class="pointer1st" id="7">7</li>
            <li class="middle" id="8">8</li>
            <li class="ring" id="9">9</li>
            <li class="pinky" id="0">0</li>
            <li class="pinky" id="-">-</li>
            <li class="pinky" id="+">+</li>
            <li class="pinky" id="back">BACK</li>
        </div>
        <div class="row row-1">
            <li class="pinky" id="tab">TAB</li>
            <li class="pinky" id="Q">Q</li>
            <li class="ring" id="W">W</li>
            <li class="middle" id="E">E</li>
            <li class="pointer1st" id="R">R</li>
            <li class="pointer2nd" id="T">T</li>
            <li class="pointer2nd" id="Y">Y</li>
            <li class="pointer1st" id="U">U</li>
            <li class="middle" id="I">I</li>
            <li class="ring" id="O">O</li>
            <li class="pinky" id="P">P</li>
            <li class="pinky" id="[">[</li>
            <li class="pinky" id="]">]</li>
            <li class="pinky" id="\">\</li>
        </div>
        <div class="row row-2">
            <li class="pinky" id="caps">CAPS</li>
            <li class="pinky" id="A">A</li>
            <li class="ring" id="S">S</li>
            <li class="middle" id="D">D</li>
            <li class="pointer1st" id="F">F</li>
            <li class="pointer2nd" id="G">G</li>
            <li class="pointer2nd" id="H">H</li>
            <li class="pointer1st" id="J">J</li>
            <li class="middle" id="K">K</li>
            <li class="ring" id="L">L</li>
            <li class="pinky" id=";">;</li>
            <li class="pinky" id="'">'</li>
            <li class="pinky" id="enter">ENTER</li>
        </div>
        <div class="row row-3">
            <li class="pinky" id="left-shift">SHIFT</li>
            <li class="pinky" id="Z">Z</li>
            <li class="ring" id="X">X</li>
            <li class="middle" id="C">C</li>
            <li class="pointer1st" id="V">V</li>
            <li class="pointer2nd" id="B">B</li>
            <li class="pointer2nd" id="N">N</li>
            <li class="pointer1st" id="M">M</li>
            <li class="middle" id=",">,</li>
            <li class="ring" id=".">.</li>
            <li class="pinky" id="/">/</li>
            <li class="pinky" id="right-shift">SHIFT</li>
        </div>
    </div>
</body>
</html>
<script>
    // 或者键盘上你所对应的按键
    document.addEventListener("keyup",event=>{
        // 通过接收一个Unicode来返回一个字符串
        let keyPassed = String.fromCharCode(event.keyCode)
        // 然后获得指定的element
        const keyElement = document.getElementById(keyPassed)
        // 然后使它动画
        keyElement.classList.add("hit")
        // 监听动画是否完成，完成的话移除hit
        keyElement.addEventListener("animationend",()=>{
            keyElement.classList.remove("hit")
        })
        const heightlightedKey = document.querySelector(".selected")
        if(keyPassed === heightlightedKey.innerHTML){
            heightlightedKey.classList.remove("selected")
            targetRandomKey()
        }
    })
    // 创建所有的字母
    const keys = [..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
    // 随机获取0-24间的整数
    function getRandomNumber(min,max){
        min = Math.ceil(min)
        max = Math.floor(max)
        return Math.floor(Math.random() * (max + 1))
    }
    // 随机获取一个字母
    function getRandomKey(){
        return keys[getRandomNumber(0,keys.length - 1)]
    }
    function targetRandomKey(){
        const key = document.getElementById(getRandomKey())
        key.classList.add("selected")
    }
    targetRandomKey()
</script>